﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase
@using Microsoft.AspNetCore.Components.Web  

<div class=@($"{GlobalClassNames["root"]} {(Disabled ? GlobalClassNames["disabled"] : GlobalClassNames["enabled"])} {(Vertical ? GlobalClassNames["column"] : GlobalClassNames["row"])} {ClassName}")
     style=@Style>
    @if (!string.IsNullOrWhiteSpace(Label))
    {
        <Label ClassName=@($"{GlobalClassNames["titleLabel"]} {TitleLabelClassName}")
                  AriaLabel=@AriaLabel
                  HtmlFor=@(string.IsNullOrWhiteSpace(AriaLabel)? id : null)
                  >
            @Label
        </Label>
    }
    <div class=@($"{GlobalClassNames["container"]}")>
        <div id=@id
             aria-valuenow=@value
             aria-valuemin=@Min
             aria-valuemax=@Max
             aria-valuetext=@GetAriaValueText(value)
             aria-label=@(string.IsNullOrWhiteSpace(AriaLabel) ? Label : AriaLabel)
             aria-disabled=@Disabled
             class=@($"{GlobalClassNames["slideBox"]}{(ShowValue ? $" {GlobalClassNames["showValue"]}" : "")}{(showTransitions ? $" {GlobalClassNames["showTransitions"]}" : "")}")
             role="slider"
             tabindex=@(Disabled ? null : "0")
             data-is-focusable=@(!Disabled)
             @ref=@slideBox
             >
            <div @ref=@sliderLine
                 class=@GlobalClassNames["line"]>
                @if (OriginFromZero)
                {
                    <span class=@GlobalClassNames["zeroTick"]
                          style=@GetStyleUsingOffsetPercent(Vertical,zeroOffsetPercent) />
                }
                <span @ref=@thumb
                      class=@GlobalClassNames["thumb"]
                      style=@GetStyleUsingOffsetPercent(Vertical,thumbOffsetPercent) />
                @if (OriginFromZero)
                {
                    <span class=@($"{GlobalClassNames["lineContainer"]} {TitleLabelClassName} {GlobalClassNames["inactiveSection"]}")
                          style=@($"{LengthString}:{Math.Min(thumbOffsetPercent, zeroOffsetPercent)}%;") />
                    <span class=@($"{GlobalClassNames["lineContainer"]} {GlobalClassNames["activeSection"]}")
                          style=@($"{LengthString}:{Math.Abs(thumbOffsetPercent - zeroOffsetPercent)}%;") />
                    <span class=@($"{GlobalClassNames["lineContainer"]} {GlobalClassNames["inactiveSection"]}")
                          style=@($"{LengthString}:{Math.Min(100 - thumbOffsetPercent, 100 - zeroOffsetPercent)}%;") />
                }
                else
                {
                    <span class=@($"{GlobalClassNames["lineContainer"]} {GlobalClassNames["activeSection"]}")
                          style=@($"{LengthString}:{thumbOffsetPercent}%;") />
                    <span class=@($"{GlobalClassNames["lineContainer"]} {GlobalClassNames["inactiveSection"]}")
                          style=@($"{LengthString}:{100 - thumbOffsetPercent}%;") />
                }
            </div>
        </div>
        @if (ShowValue)
        {
            <Label ClassName=@GlobalClassNames["valueLabel"]
                      Disabled=@Disabled
                      >
                @(ValueFormat != null ? ValueFormat(value) : value.ToString())
            </Label>
        }
    </div>
</div>
